<template>
    <div>
        <button @click="agentDownload(id)" class="download down-btn f-bn">
            <i class="iconfont icon-down" slot="icon"></i>
        </button>
        <mt-popup position="bottom" class="f-w100" v-model="isPop" v-if="popData">
            <div class="f-tac">
                <img :src="popData.gameinfo.micon" class="pop-game-icon">
                <h3>{{popData.gameinfo.name}}</h3>
                <p class="f-fs14">{{popData.gameinfo.typename}}｜{{popData.gameinfo.adsize}}｜{{popData.gameinfo.downloads}}次下载</p>
                <h5 class="f-tal pop-tip f-fs12">下载后，请在游戏内重新注册账号，使用狐玩账号将无法登录游戏</h5>
            </div>
            <ul class="pop-list">
                <li class="f-dfc" v-for="item in popData.downlist" :key="item.index">
                <img :src="item.agenticon" class="pop-img bg">
                <div class="f-fx1">
                    <p class="f-fs14 f-mp0">{{item.agentname}}</p>
                    <p class="f-e85 f-fs12 f-mp0">首充{{item.firstrate}}折,续充{{item.rate}}折</p>
                </div>
                <a :href="item.down" target="_blank" class="download down-link iconfont icon-down"></a>
                </li>
            </ul>
        </mt-popup>
    </div>
</template>

<script>
export default {
    name: 'downloadButton',
    props:['id'],
    data () {
        return {
            popData:null,
            isPop:false,
            plat:sessionStorage.platType
        }
    },
    methods: {
        agentDownload(id){
            this.$ajax.Detail.download(id).then(({data:{data}})=>{
                this.isPop=true;
                this.popData=data;
            })
        }
    },
    created (){
        
    }
}
</script>

<style scoped lang="less">
.mint-popup{
    min-height: 80vh;
}
.pop-tip{
    padding:0 20px;
}
.download{
    background: #fff6e1;
    color: #fca403;
    padding:20px;
    margin-right: 10px;
    border-radius: 10px;
}
.icon-down{
    font-size: 18PX;
}
.down-link{
    display: inline-block;
    padding: 18px 20px;
    margin-right: 20px;
    border-radius: 6px;
}
.pop-game-icon {
    width: 200px;
    height: 200px;
    margin-top: -100px;
}
.pop-list{
    max-height: 600px;
    overflow-y: scroll;
    li{
        margin-bottom: 20px;
    }
}
.pop-img {
    width: 100px;
    height: 100px;
    margin: 0 20px 0 20px;
}
</style>
